<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div>
            <form id="search-form"
                  class="layui-form layui-form-pane"
                  lay-filter="search-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="keyword"
                                   placeholder="名称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button"
                                id="reset-btn"
                                class="layui-btn layui-btn-warm">
                            <i class="layui-icon layui-icon-refresh"></i> 重 置 </button>
                        <button type="submit"
                                id="search-btn"
                                class="layui-btn layui-btn-normal"
                                lay-submit lay-filter="search-btn">
                            <i class="layui-icon layui-icon-search"></i> 搜 索 </button>
                    </div>
                </div>
            </form>
        </div>

        <table class="layui-hide" id="data-table" lay-filter="data-table"></table>

        <script type="text/html" id="data-toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn"
                        lay-event="add" id="add-btn"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn layui-btn-disabled"
                        lay-event="remove" id="remove-btn"> 删除 </button>
            </div>
        </script>

        <script type="text/html" id="data-tool">
            <a class="layui-btn layui-btn-normal layui-btn-xs"
               lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger"
               lay-event="remove">删除</a>
        </script>
    </div>
</div>

<script>
    class SysRolePage extends ListPage {
        constructor() {
            super({
                title: '角色',
                uri: 'sysRoles',
                cols: [[
                    {type: 'checkbox', align: 'center'},
                    {field: 'name', title: '名称', align: 'center'},
                    {title: '操作', minWidth: 150, toolbar: '#data-tool', align: "center"}
                ]],
                saveUri: 'sysRoles/save',
                removeUri: 'sysRoles/remove',
                savePageUri: 'page/sys/role/save.html'
            })
        }

        _initSaveForm() {
            super._initSaveForm()

            this._loadResources()
        }

        _loadResources() {
            if (this._resources) {
                this._buildResources()
                return
            }
            Ajaxs.get({
                uri: 'sysResources/listTree',
                success: (response) => {
                    this._resources = response.data
                    this._buildResources()
                }
            })
        }

        _buildResources() {
            this._tree = new Tree({
                selector: '#resource-tree',
                data: this._resources,
                showCheckbox: true
            })

            if (this._editData) {
                Ajaxs.get({
                    uri: 'sysResources/ids',
                    data: {
                        roleId: this._editData.id
                    },
                    success: (response) => {
                        this._tree.val(response.data)
                    }
                })
            }
        }

        _onSumbit(field) {
            const resourceIds = []
            for (const dir of this._tree.selectedData()) {
                for (const menu of dir.children) {
                    if (!menu.children) continue
                    for (const btn of menu.children) {
                        resourceIds.push(btn.id)
                    }
                }
            }
            const newField = {
                id: field.id,
                name: field.name
            }

            newField.resourceIds = resourceIds.join(',')

            return newField
        }
    }

    new SysRolePage()
</script>